<script setup lang="ts">
import { computed } from "vue";
interface IProp {
	modelValue: Item;
	list: Item[];
}
interface Item {
	label: string;
	value: any;
}

const props = defineProps<IProp>();

const emit = defineEmits(["change", "update:modelValue"]);
// const innerData = ref(props.list[0]);

const proxy = computed({
	set(v) {
		emit("update:modelValue", v);
	},

	get() {
		return props.modelValue;
	}
});

const onChange = (item: Item) => {
	proxy.value = item;
};
</script>

<template>
	<div class="j-btns">
		<div class="j-btn" v-for="item in props.list" :class="{ choose: item == proxy }" @click="onChange(item)">{{ item.label }}</div>
	</div>
</template>

<style lang="less" scoped>
.j-btns {
	display: flex;
	align-items: center;
	.j-btn {
		padding: 0 10px;
		height: 30px;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #909090;
		color: #fff;
		&.choose {
			background: rgb(255, 132, 0);
		}
	}
}
</style>
